<template>
  <scroll-view v-if="noticeListData&&noticeListData.length>0">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="item in noticeListData" :key="item.id">
        <view class="import-text-tag" v-if="item.isImport===1">
          重要
        </view>
        <view @click="goNoticeDetail(item)">
          <u-cell :title="item.creator" :label="item.createTime" :border="false">
            <u-avatar slot="icon" size="35" :text="item.avatarText" customStyle="margin: -3px 5px -3px 0"></u-avatar>
          </u-cell>
          <u-cell :title="item.name" :label="item.contentText" :border="false">
          </u-cell>
        </view>
      </u-list-item>
    </u-list>
    <view>
      <u-loading-page :loading="loading" loading-text="正在加载中..." bg-color="#e8e8e8"></u-loading-page>
    </view>
  </scroll-view>
  <view v-else>
    <u-empty mode="data" margin-top="100">
    </u-empty>
  </view>
</template>

<script>
  import * as NoticeApi from "@/api/notice.js"
  import {
    formatDate
  } from "@/utils/common.js"
  export default {
    data() {
      return {
        queryParams: {
          pageNo: 1,
          pageSize: 10
        },
		total:0,
        noticeListData: [],
      }
    },
    methods: {
      getNoticeListData(params) {
        NoticeApi.getNoticeListData(params).then(res => {
          const listData = res.data.list;
          const list = listData.map(i => {
            return {
              ...i,
              createTime: formatDate(i.createTime),
              avatarText: i.creator.substring(0, 1),
              contentText: i.content.replace(/<[^>]*>/g, '')
            }
          });
		  this.queryParams=params;
          this.$set(this, "noticeListData", list);
		  this.total=res.data.total;
        });
      },
	  scrolltolower(){
		  this.loadMoreData()
	  },
	  loadMoreData(){
		if(this.list.length>=this.total) return ;
		this.queryParams={
			...this.queryParams,
			pageNo:this.queryParams.pageNo+1
		};
		this.getNoticeListData(this.queryParams)
	  },
      goNoticeDetail(item) {
        uni.navigateTo({
          url: `/pages/notice/detail/index?id=${item.id}`
        })
      }
    },
    onShow() {
      //从首页重要通知统计数据跳转传的参数
      const isImport = uni.getStorageSync('isImport') ? JSON.parse(uni.getStorageSync('isImport')) : null;
      this.queryParams = {
        ...this.queryParams,
        isImport
      }
      this.getNoticeListData(this.queryParams)
    },
    onHide() {
      uni.removeStorageSync('isImport')
    },
    onReachBottom() {
      const params = {
        ...this.queryParams,
        pageNo: this.queryParams.pageNo + 1
      }
      this.getNoticeListData(this.queryParams)
    }
  }
</script>

<style lang="scss">
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #F5F8FD;
    min-height: 100%;
    height: auto;
  }

  ::v-deep .u-list-item {
    position: relative;
    // height: 400rpx;
    margin: 20rpx;
    // padding: 32rpx;
    border-radius: 8rpx;
    background: #FFFFFF;
  }

  .import-text-tag {
    position: absolute;
    right: 0;
    top: 0;
    width: 100rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    border-radius: 0rpx 8rpx 0rpx 20rpx;
    background: #FFE6E6;
    box-shadow: 0px 4rpx 0px 0px rgba(153, 153, 153, 0.1);
    font-family: Source Han Sans;
    font-size: 24rpx;
    font-weight: normal;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #FF3D3D;
  }

  ::v-deep .u-cell__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>